{% macro code_example(example_name) %}
{% set example_data = load_data(path="data/" ~ example_name ~ ".toml") %}

<!-- {% if example_data.wasm %}
<script type="module">
  import init from '{{ get_url(path="examples/" ~ example_name ~ "/pkg/" ~ example_name ~ ".js") }}';
  init();
</script>
<canvas id="app" width="1280" height="720" style="width: 100%; min-height: 400;"></canvas>
{% endif %} -->

<sl-tab-group>
  <sl-tab slot="nav" panel="preview">Preview</sl-tab>
  {% if example_data.wasm %}
  <sl-tab slot="nav" panel="app">App</sl-tab>
  {% endif %}

  <sl-tab-panel name="preview">
    {% for output_file in example_data.output_files %}
    {% if output_file is ending_with(".mp4") %}
    <video controls>
      <source src="{{ get_url(path=output_file) }}" type="video/mp4">
      您的浏览器不支持视频标签。
    </video>
    {% else %}
    <img src="{{ get_url(path=output_file) }}" alt="{{ example_data.name }} 示例输出">
    {% endif %}
    {% endfor %}
  </sl-tab-panel>
  {% if example_data.wasm %}
  <sl-tab-panel name="app">
    <script type="module">
      import init, * as ranim from '{{ get_url(path="examples/" ~ example_name ~ "/pkg/" ~ example_name ~ ".js") }}';
      window.ranim_examples = init().then(() => ranim);

      const { find_scene, preview_scene } = await ranim_examples;
      preview_scene(find_scene("{{ example_name }}"));
    </script>
    <canvas id="ranim-app-{{ example_name }}" width="1280" height="1020" style="width: 100%; aspect-ratio: 16 / 12;"></canvas>

  </sl-tab-panel>
  {% endif %}
</sl-tab-group>


{{ example_data.code | markdown }}
{% endmacro %}

{% macro process_code_block(content) %}
{% set lines = content | split(pat="\n") %}
{% set result = [] %}
{% set i = 0 %}
{% set in_code_block = false %}
{% set code_block_content = [] %}

{% for line in lines %}
{% if line is starting_with("<p>!example-") and not in_code_block %}
  {% set parts = line | split(pat="!example-") %}
  {% set example_info = parts[1] | split(pat="</p>") %}
{% set example_block = self::code_example(example_name=example_info[0]) %}
{% set_global result = result | concat(with=example_block) %}
{% else %}
{% set_global result = result | concat(with=line) %}
{% endif %}
{% endfor %}

{{ result | join(sep="\n") | safe }}
{% endmacro %}